<script setup lang="ts">
const {locale, setLocale} = useI18n()
</script>

<template>
  <v-app-bar
      color="#F5F4F2"
      height="72"
      scroll-behavior="elevate hide"
      scroll-threshold="135">

    <div class="w-full d-flex justify-space-evenly align-center">
      <!--      侧边栏按钮 d-sm-flex d-md-none表示仅在sm尺寸(包括)以下可见-->
      <div class="d-sm-flex d-md-none">
        <v-btn color="#786554" icon="mdi-format-list-bulleted"></v-btn>
      </div>

      <!--logo图标-->
      <div class="cursor-pointer">
        <NuxtLink to="/">
          <v-img
              width="270"
              height="25"
              src="https://cdn.shopifycdn.net/s/files/1/0074/7077/6371/files/albany-park-brown-logo_270x25.svg?v=1714409917"
          ></v-img>
        </NuxtLink>
      </div>


      <!--导航栏-->
      <NavigationBar class="d-none d-sm-none d-md-flex"/>

      <!--图标类-->
      <div class="d-flex flex-row">
        <!-- Git图标-->
        <v-btn class="d-none d-sm-none d-md-flex" color="#786554" icon="mdi-cart"></v-btn>

        <!-- 中英文切换-->
        <v-menu>
          <template v-slot:activator="{ props }">
            <v-btn color="#786554" icon="mdi-translate" v-bind="props"></v-btn>
          </template>
          <v-list>
            <v-list-item @click="setLocale('en')">
              <v-list-item-title>English</v-list-item-title>
            </v-list-item>
            <v-list-item @click="setLocale('zh')">
              <v-list-item-title>简体中文</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
    </div>

  </v-app-bar>
</template>

<style scoped>
</style>